<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <!--active是上面定义好的类名-->
  <sapn :style="[obj,obj2]" @click="details">site : {{site}}</sapn>
  <br>
  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_det',
    data: {
      site: "菜鸟教程",
      list:[1,2,3,4],
      obj:{
        color:'red'
      },
      obj2:{
        fontSize : '30px'
      }
    },
    methods: {
      details: function() {
        this.obj.color='green'; //点击来控制字体颜色切换
      }
    }
  })
</script>
</body>
</html>
